<template>
    <div>
        <!-- 属性 -->
        <div v-show="currentPanel === 'property'" class="options-panel_property">
            <div class="panel-from">
                <div class="panel-form-item">
                    <div class="item-label">页面ID</div>
                    <div class="item-input">
                        <a-input v-model:value="generateData.data.id" disabled placeholder="请输入" />
                    </div>
                </div>
                <div class="panel-form-item">
                    <div class="item-label">页面名称</div>
                    <div class="item-input">
                        <a-input v-model:value="generateData.data.label" placeholder="请输入" />
                    </div>
                </div>
                <div class="panel-form-item">
                    <div class="item-label">布局方式</div>
                    <div class="item-input">
                        <a-radio-group v-model:value="generateData.data.layout" @change="pageLayoutChange">
                            <a-radio-button value="flow">流式</a-radio-button>
                            <a-radio-button value="free">自由</a-radio-button>
                        </a-radio-group>
                    </div>
                </div>
            </div>
        </div>
        <!-- 样式 -->
        <div v-show="currentPanel === 'style'" class="options-panel_style">
            <div class="panel-from">
                <div class="panel-form-item">
                    <div class="item-label">内边距</div>
                    <div class="item-input">
                        <a-input v-model:value="generateData.data.componentProps.style.padding" placeholder="请输入" />
                    </div>
                </div>
                <div class="panel-form-item">
                    <div class="item-label">画布宽度</div>
                    <div class="item-input">
                        <a-input v-model:value="generateData.data.componentProps.style.width" placeholder="请输入" />
                    </div>
                </div>
                <div class="panel-form-item">
                    <div class="item-label">画布高度</div>
                    <div class="item-input">
                        <a-input v-model:value="generateData.data.componentProps.style.height" placeholder="请输入" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { generateData } from '../../pageManager.js'
import { setComponentLayout } from '../../componentManager.js'

const props = defineProps({
    currentPanel: {
        type: String,
        default: "property"
    },
})

// 组件布局类型改变时触发
const pageLayoutChange = (e) => {
    setComponentLayout(e.target.value);
}


</script>

<style lang="less" scoped>
.options-panel_property,
.options-panel_style {
    padding: 15px;
}
</style>../../componentManager.js